<template>
  <div class="file-write-dialog">
    <el-form :model="FileWrite" size="mini" label-width="100px" label-position="left">
      <el-form-item label="文件地址">
        <data-source-input
            style="width: 89%;margin-left: 6px"
            :datasource-item="FileWrite.NodeFile"
            :node-id="FileWrite.NodeFile.DataSourceId"
            :param-name="FileWrite.NodeFile.ParamName"
            @change="onChange"
        />
      </el-form-item>
      <el-form-item label="文件编码" width="120px">
        <el-select
            v-model="FileWrite.NodeFile.EncodingFormat"
            placeholder="请选择地址"
            clearable
            style="width: 90%;"
        >
          <el-option
              v-for="item in encodingFormats"
              :key="item.value"
              :label="item.tip"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文件格式">
        <write-content/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
            v-model="FileWrite.Desc"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
            style="width: 90%"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>

import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi'
import { AppParams } from '@/utils/appParams'
import Utils from '../../../../utils/Common'
import { MessageWarning } from "@/utils";

import { onMounted, ref } from "vue";

import { useFlowStore } from "@/store/modules/flow/flowStore";
import {WriteContent} from './index.ts'
const encodingFormats = ref(AppParams.COMMON.ENCODING_FORMATS)
const FileWrite = ref({
  NodeFile: {
    Write: { DataSource: null, DataSourceId: null, ParamName: null },
    EncodingFormat: null,
  },
  Desc: null
})

const FlowStore = useFlowStore()
/**
 * 选中的值
 * @param item
 */
const onChange = (item) => {
  if (!Utils.IsEmpty(item)) {
    FileWrite.value.NodeFile = item
    FileWrite.value.NodeFile.DataSourceId = item.nodeId
  }
}
const ShowNodeData = () => {
  SetFormValue(FlowStore.CurrentClickNode)
}
/**
 * 设置回显的表单数据
 * @param _node
 * @constructor
 */
const SetFormValue = (_node) => {
  const InputParams = _node.nodeInputParam
  if (!Utils.IsEmpty(InputParams?.NodeFile)) {
    const from = {}
    from.Desc = InputParams.Desc
    from.NodeFile = InputParams.NodeFile
    FileWrite.value = from
  }
}
const _SaveNode = (NodeName) => {
  const _file = FileWrite.value
  if (_file.NodeFile?.DataSourceId < 0) {
    return MessageWarning('请选择或输入地址')
  }
  const params = {
    NodeFile: _file.NodeFile,
    Desc: _file.Desc
  }
  new FlowNodeDataApi().Install(FlowStore.CurrentClickNode.id, params, NodeName)
}

onMounted(() => {
  ShowNodeData()
})
</script>

<style lang="less">
.file-write-dialog {
  .file-write-item {
    display: flex;
    margin-bottom: 10px;

    .file-write-item-param-name {
      width: 260px;
    }
  }

  .file-write-adds {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;

    .file-write-btn {
      height: 20px;
      float: left;
      background-color: red;
    }
  }
}
</style>

